<template>
  <div class="dashboard-container">
    <el-button v-for="item in 10" :key="item" type="primary" plain style="margin-bottom: 10px;" @click="handleCreateOrder(item/10)">打赏 ￥{{ item/10 }}</el-button>
    <Editor v-model="demoContent" :catalog="constants.FILE_CATALOG_EXAMPLE" />
    <model-dialog
      :visible.sync="sideBox.payShow"
      :title="sideBox.title"
      width="600px"
      :show-close="false"
      @close="sideBox.payShow = !sideBox.payShow">
      <template>
        <pay ref="pay" @payNotify="handlePayNotify" />
      </template>
    </model-dialog>
  </div>
</template>

<script>
import Pay from '@/views/components/pay.vue'

export default {
  name: 'Dashboard',
  components: { Pay },
  data() {
    return {
      demoContent: '',
      // 固定写法
      sideBox: {
        payShow: false,
        title: ''
      }
    }
  },
  computed: {
  },
  watch: {
    'sideBox.payShow': function(val) {
      if (val === false) {
        this.$refs.pay.clearInterval()
      }
    }
  },
  mounted() {
  },
  destroyed() {

  },
  created() {
  },
  methods: {
    handleCreateOrder(price) {
      this.$store.dispatch('businessCreateOrder', {
        orderName: '打赏',
        price: price
      }).then(response => {
        this.msgSuccess('订单创建成功,去支付！')
        this.handleDoPay(response)
      }).catch(() => {
        this.sideBox.payShow = true
      })
    },
    handleDoPay(row) {
      this.sideBox.payShow = true
      this.sideBox.title = row.orderName
      this.$nextTick(() => {
        this.$refs.pay.init(row.id)
      })
    },
    handlePayNotify(val) {
      this.sideBox.payShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
